<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../node_modules/react/umd/react.development.js'></script>
    <script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <script src='../node_modules/prop-types/prop-types.js'></script>
</head>

<body>
    <div id='root'></div>

    <script type="text/babel">
        class MyCom extends React.Component {
            constructor(props) {
                super(props)//this.props = props

                /* 初始化组件内状态 */
                this.state = {
                    name: "Bing Dwen Dwen",
                    age: 28
                }
            }

            render() {
                return (
                    <div>
                        <h3>{this.state.name}</h3>
                        <div>{this.state.age}</div>

                        <button onClick={
                            () => {
                                // console.log(this);
                                // this.state.name = "冰墩墩儿"

                                this.setState({
                                    name: "冰墩墩儿",
                                    age: 18
                                })
                            }
                        }>改变state数据</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<MyCom />, document.querySelector("#root"))
    </script>
</body>

</html>